<template>
    <view class="page">
        <st-uni-tab-control :current="searchForm.status" :values="items" bgc="#fff" :fixed="true" :isEqually='true' @clickItem="onClickItem"/>
        <!-- 使用 swiper 配合 滑动切换 -->
        <view class="content">
          <st-uni-loadmore ref="loadmoreEnjoyRef">
            <view v-show="searchForm.status === 0">
                <uni-list :border="true">
                    <uni-list-chat v-for=" item in listData" :avatar-circle="true" :title="item.enjoyedNickname"
                                   :key="item.id"
                                   :avatar="item.enjoyedAvatar" :note="item.enjoyedGender" :time="item.createAt"
                                   @click="$utils.n.ngt('/pages/detail/detail?userId=' + item.enjoyedUserId)"
                                   clickable/>
                </uni-list>
            </view>
            <view v-show="searchForm.status === 1">
                <uni-list :border="true">
                    <uni-list-chat v-for=" item in listData" :avatar-circle="true" :title="item.nickname"
                                   :key="item.id"
                                   :avatar="item.avatar"
                                   :note="item.gender"
                                   :time="item.createAt"
                                   @click="$utils.n.ngt('/pages/detail/detail?userId=' + item.userId)"
                                   clickable/>
                </uni-list>
            </view>
            <view v-show="searchForm.status === 2">
                <uni-list-chat v-for=" item in listData" :avatar-circle="true" :title="item.enjoyedNickname"
                               :key="item.id"
                               :avatar="item.enjoyedAvatar"
                               :note="item.enjoyedGender"
                               :time="item.createAt"
                               @click="$utils.n.ngt('/pages/detail/detail?userId=' + item.enjoyedUserId)"
                               clickable/>
            </view>
          </st-uni-loadmore>
        </view>
    </view>
</template>

<script>
    import StUniTabControl from "../../components/st-uni-tab-control/StUniTabControl"
    import StUniLoadmore from "../../components/StUniLoadmore"

    export default {
        components: {StUniTabControl, StUniLoadmore},
        data() {
            return {
                items: [
                    '对谁有意思',
                    '对我有意思',
                    '互相有意思'
                ],
                listData: [],
                searchForm: {
                  status: 0,
                  orderBy: 'createAt-0'
                },
            };
        },
        onLoad() {
            this.loadData()
        },
        onPullDownRefresh() {
            this.loadData(true)
        },
        methods: {
            onClickItem(e) {
                if (this.searchForm.status !== e.currentIndex) {
                    this.searchForm.status = e.currentIndex
                }
                this.listData = []
                this.loadData(true)
            },
            loadData: function (pullDownRefresh) {
              if (!this.$refs.loadmoreEnjoyRef) {
                return
              }

              this.$refs.loadmoreEnjoyRef.loadData('/user-enjoy/getPage', {
                pullDownRefresh: !!pullDownRefresh,
                data: this.searchForm
              }).then(res => {
                let content = res.data.records
                if (pullDownRefresh) {
                  this.listData = content
                } else {
                  this.listData = this.listData.concat(content);
                }
              })
            }
        }
    }
</script>

<style>
    page{
        height: 100%;
    }
    .page{
        padding-top: 98rpx;
        height: 100%;
    }
</style>
